<template>
    <div class="chat-index">
        <el-row :gutter="0" class="chat-row">
            <el-col :span="2" class="chat-col">
                <div class="left-menu">
                    <ul class="menu-ul">
                        <li>
                            <img src="../../assets/user-head.jpg" class="user-head"/>
                        </li>
                        <!--<li @click="showType=1"><i class="el-icon-chat-round"/></li>-->
                        <li @click="showType=2"><i class="el-icon-s-custom"/></li>
                    </ul>

                    <ul class="menu-ul bottom">
                        <li @click="showType=1"><i class="el-icon-setting"/></li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="7" class="chat-col">
                <div class="friend-list">
                    <ul class="list-ul" v-if="showType==1">
                        <li>
                            <el-input v-model="searchTxt" placeholder="请输入内容" size="mini"></el-input>
                        </li>
                        <li v-for="(bean,idx) in 10" :key="idx" @click="friendClick(idx)"
                            :class="{active:selectIndex==idx}">
                            <img src="../../assets/user-head.png" class="user-head"/>
                            <span class="offline"></span>
                            <div class="friend-right">
                                <span class="user-name">
                                    易立
                                    <span class="time right">9:03</span>
                                </span>
                                <span class="last-msg">你在吗？
                                    <span class="icon right">
                                        <i class="el-icon-bell"/>
                                    </span>
                                </span>
                            </div>
                        </li>
                    </ul>

                    <ul class="list-ul friend-ul" v-if="showType==2">
                        <li>
                            <el-input v-model="searchTxt" placeholder="请输入内容" size="mini"></el-input>
                        </li>
                        <li v-for="(bean,idx) in onlineList" :key="idx" @click="friendClick(idx)"
                            :class="{active:selectIndex==idx}">
                            <img src="../../assets/user-head.png" class="user-head"/>
                            <span class="offline" v-if="bean.status!=1"></span>
                            <div class="friend-right">
                                <span class="user-name">
                                    {{bean.name}}
                                </span>
                                <span class="icon right" v-if="bean.count>0">
                                    {{bean.count}}
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="15" class="chat-col">
                <div class="chat-content" v-if="selectIndex>=0">
                    <div class="friend-name">{{onlineList[selectIndex].name}}</div>
                    <div class="msg-list" ref="msgList">
                        <ul class="list-ul msg-ul">
                            <template v-for="(bean,idx) in onlineList[selectIndex].msg">
                                <li :key="idx" :class="{right:bean.direction==1}">
                                    <img src="../../assets/user-head.png" class="user-head"/>
                                    <div class="msg">
                                        <span class="msg-txt">{{bean.msg}}</span>
                                    </div>
                                    <span class="msg-tip" v-if="bean.direction==1">{{bean.status===0?'未读':'已读'}}</span>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div class="send-input">
                        <textarea class="send-text" v-model="msg" @focus="msgFocus" @keydown.enter.prevent="send">

                        </textarea>
                        <el-button size="small" @click="send" :disabled="!msg">发送</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Communication from '../../components/Communication';

    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                showType: 2,
                searchTxt: '',
                selectIndex: -1,
                socket: null,
                msg: '',
                onlineList: [],
            }
        },
        methods: {
            friendClick(idx) {
                if (idx === this.selectIndex) {
                    return;
                }
                this.onlineList[idx].count = 0;
                //发送已读消息
                let list = this.onlineList[idx].msg;
                let ids = [];
                for (let i = 0; i < list.length; i++) {
                    if (list[i].direction === 0 && list[i].status === 0) { //是接收到得信息 并且是未读消息
                        ids.push(list[i].id);
                    }
                }
                if (ids.length > 0) {
                    //发送已读消息
                    this.socket.sendTo(this.$store.state.userInfo, this.onlineList[idx].name, JSON.stringify(ids), 'Read');
                }
                //为了客户端存储删除之前选中用户得消息
                if (this.selectIndex >= 0) {
                    this.onlineList[this.selectIndex].msg = [];
                }
                this.selectIndex = idx;
            },
            msgFocus() {
                this.socket.sendTo(this.$store.state.userInfo, this.onlineList[this.selectIndex].name, '', 'Input');
            },
            send() {
                if (!this.msg) {
                    return;
                }
                let data = this.socket.sendTo(this.$store.state.userInfo, this.onlineList[this.selectIndex].name, this.msg, 'Send');
                this.msg = '';
            },
            addMsg(friend, id, user, dir, msg, status) {
                //方向 dir  0 收到 1发送得      status 是否已读  0未读  1已读
                let data = {id: id, user: user, direction: dir, msg: msg, status: status};
                for (let i = 0; i < this.onlineList.length; i++) {
                    if (this.onlineList[i].name === friend) {
                        this.onlineList[i].msg.push(data);
                        if (dir === 0) {
                            if (this.selectIndex != i) {
                                this.onlineList[i].count++;  //如果是接收到并且当前选择用户不是这个用户的话 未读信息加一
                            } else {
                                //发送已读消息
                                this.socket.sendTo(this.$store.state.userInfo, user, JSON.stringify([id]), 'Read');
                            }
                        }
                        break;
                    }
                }
                this.$nextTick(() => {
                    try {
                        let content = this.$refs.msgList;
                        content.scrollTop = content.scrollHeight;
                    } catch (e) {
                        console.debug(e);
                    }
                })
            },
            addOnline(name) {
                let have = false;
                for (let i = 0; i < this.onlineList.length; i++) {
                    if (this.onlineList[i].name === name) {
                        have = true;
                        break;
                    }
                }
                if (have == false) {
                    this.onlineList.push({name: name, head: '', msg: [], count: 0, status: 1})
                }
            },
            offline(name) {
                for (let i = 0; i < this.onlineList.length; i++) {
                    if (this.onlineList[i].name === name) {
                        // this.selectIndex = -1;
                        // this.onlineList.splice(i, 1);
                        this.onlineList[i].status = 2;  //离线
                        break;
                    }
                }
            },
            readMsg(user, ids) {
                for (let i = 0; i < this.onlineList.length; i++) {
                    if (this.onlineList[i].name === user) {
                        let list = this.onlineList[i].msg;
                        this.onlineList[i].msg.forEach(msg => {
                            if (this.existArray(ids, msg.id)) {
                                msg.status = 1;  //已读
                            }
                        })
                        break;
                    }
                }
            },
            existArray(array, id) {
                if (!array || array.length == 0) {
                    return false;
                }
                for (let i = 0; i < array.length; i++) {
                    if (array[i] === id) {
                        return true;
                    }
                }
                return false;
            }
        },
        mounted() {
            this.$event.clear();
            this.socket = new Communication(this.$event, "ws://localhost:8888/ws").init();
            this.$event.on("open", () => {
                this.socket.login(this.$store.state.userInfo);
            })
            //接收得消息
            this.$event.on("Receive", (data) => {
                this.addMsg(data.from, data.no, data.from, 0, data.data, 0);
            })
            //自己发送信息返回值
            this.$event.on("Send", (data) => {
                this.addMsg(data.to, data.no, data.from, 1, data.data, 0);
            })
            this.$event.on("Online", (data) => {
                this.addOnline(data.from);
            })
            this.$event.on("Offline", (data) => {
                this.offline(data.from);
            })
            this.$event.on("Read", (data) => {
                this.readMsg(data.from, JSON.parse(data.data));
            })
            this.$event.on("Input", () => {
                console.info("输入中")
            })
            this.$event.on("OnlineList", (data) => {
                let list = JSON.parse(data.data);
                list.forEach(item => {
                    this.addOnline(item);
                })
            })
        }
    }
</script>
<style lang="less" scoped>
    .chat-index {
        width: 100%;
        height: 100%;

        .chat-row {
            position: relative;
            width: 900px;
            height: 600px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            left: 50%;
            top: 50%;
            margin-left: -450px;
            margin-top: -300px;

            .chat-col {
                height: 100%;

                > * {
                    width: 100%;
                    height: 100%;
                }

                .left-menu {
                    background-color: #313F5A;
                    position: relative;

                    .menu-ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;


                        li {
                            padding: 15px 0;
                            text-align: center;
                            font-size: 24px;
                            color: #ddd;

                            &:hover {
                                color: #fff;
                                background-color: #444;
                            }
                        }

                        &.bottom {
                            position: absolute;
                            bottom: 0px;
                            left: 0px;
                            right: 0px;
                        }
                    }

                    .user-head {
                        width: 40px;
                        height: 40px;
                    }
                }


                .list-ul {
                    margin: 0;
                    padding: 10px 0;
                    list-style: none;

                    li {
                        padding: 7px 5px;
                        display: flex;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;

                        .right {
                            float: right;
                        }

                        .user-head {
                            height: 50px;
                            flex: 0 0 50px;
                        }

                        .offline {
                            position: absolute;
                            display: block;
                            height: 50px;
                            width: 50px;
                            background-color: rgba(192, 192, 192, 0.5);
                        }

                        .friend-right {
                            padding-left: 5px;
                            flex: 1 1 auto;

                            .user-name {
                                display: block;
                                height: 30px;

                                .time {
                                    color: #999999;
                                }
                            }

                            .last-msg {
                                display: block;
                                height: 25px;
                                color: #999999;
                            }


                        }

                        &:hover {
                            background-color: #ddd;
                        }

                        &.active {
                            background-color: #C5C4C4;
                        }
                    }
                }

                .friend-list {
                    background-color: rgb(236, 235, 233);
                    overflow-y: auto;

                    .friend-ul {
                        li {
                            .friend-right {
                                .user-name {
                                    height: 50px;
                                    line-height: 50px;
                                    display: inline-block;
                                }

                                .icon {
                                    display: inline-block;
                                    height: 50px;
                                    line-height: 50px;
                                }
                            }
                        }
                    }
                }

                .chat-content {
                    display: flex;
                    flex-flow: column;
                    background-color: #F5F5F5;

                    .friend-name {
                        flex: 0 0 60px;
                        border-bottom: 1px solid rgb(236, 235, 233);
                        line-height: 60px;
                        font-size: 18px;
                        font-weight: bold;
                        padding-left: 20px;
                    }

                    .msg-list {
                        flex: 1 1 auto;
                        overflow-y: auto;
                        padding: 5px 15px;

                        .msg-ul {
                            li {
                                height: 40px;
                                display: block;

                                .user-head {
                                    height: 35px;
                                    width: 35px;
                                    float: left;
                                }

                                .msg {
                                    float: left;

                                    .msg-txt {
                                        display: inline-block;
                                        padding: 0px 5px;
                                        margin: 0 15px 0 15px;
                                        line-height: 35px;
                                        max-width: 350px;
                                        word-wrap: break-word;
                                        background-color: #ffffff;
                                    }
                                }

                                .msg-tip {
                                    font-size: 10px !important;
                                    line-height: 35px;
                                    color: #ccc;
                                }

                                &.right {
                                    display: block;

                                    .user-head {
                                        width: 35px;
                                        height: 35px;
                                        float: right;
                                    }

                                    .msg {
                                        float: right;
                                    }

                                    .msg-tip {
                                        float: right;
                                    }
                                }

                                &:hover {
                                    background: none;
                                }
                            }
                        }
                    }

                    .send-input {
                        flex: 0 0 120px;
                        background-color: #ffffff;
                        text-align: right;
                        padding: 5px;

                        .send-text {
                            width: 100%;
                            height: 100px;
                            border: 0;
                            font-size: 14px;
                            resize: none;

                            &:focus {
                                outline: none;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

